<template>
    <div class="app-container">
        <avue-crud
                :option="option"
                :data="data"
                :table-loading="loading"
                :page.sync="page"
                @on-load="onLoad"
                @current-change="currentChange"
                @search-change="searchChange" @search-reset="resetChange"
        >
            <template slot-scope="scpoe" slot="menu">
                <el-button
                        icon="el-icon-view"
                        size="small"
                        type="text"
                        @click="viewPage(scpoe.row,scpoe.index)"
                >查看</el-button
                >
            </template>
        </avue-crud>
        <el-dialog title="详情" :visible.sync="box" width="50%" center>
            <div class="avue_detail">
                <el-tabs v-if="dataList.companyBaseInfo">
                    <el-tab-pane label="企业信息">
                        <table class="detailtable">
                            <tr>
                                <td width="20%">企业名称</td>
                                <td>{{dataList.companyBaseInfo.qymc}}</td>
                                <td width="25%">统一社会信用代码</td>
                                <td>{{dataList.companyBaseInfo.shtyxydm}}</td>
                            </tr>
                            <tr>
                                <td width="20%">注册时间</td>
                                <td>{{dataList.companyBaseInfo.clrq}}</td>
                                <td width="25%">注册资金</td>
                                <td>{{dataList.companyBaseInfo.zczb}}万元</td>
                            </tr>
                            <tr>
                                <td width="20%">所属行业</td>
                                <td>{{dataList.companyBaseInfo.sshy}}</td>
                                <td width="25%">所属区域</td>
                                <td>{{dataList.companyBaseInfo.ssqu}}</td>
                            </tr>
                            <tr>
                                <td width="20%">企业类型</td>
                                <td>{{dataList.companyBaseInfo.qylx}}</td>
                                <td width="25%">联系方式</td>
                                <td>{{dataList.companyBaseInfo.dh}}</td>
                            </tr>
                            <tr>
                                <td width="20%">注册地址</td>
                                <td colspan="3">{{dataList.companyBaseInfo.zs}}</td>
                            </tr>
                        </table>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs v-if="rzxxInfo">
                    <el-tab-pane label="法人信息">
                        <table class="detailtable">
                            <tr>
                                <td width="20%">法定代表人名称</td>
                                <td>{{rzxxInfo.fddbr}}</td>
                                <td width="25%">法人联系方式</td>
                                <td>{{rzxxInfo.fddbrdh}}</td>
                            </tr>
                            <tr>
                                <td width="20%">企业联系人</td>
                                <td>{{rzxxInfo.qylxr}}</td>
                                <td width="25%">企业联系人联系方式</td>
                                <td>{{rzxxInfo.qylxrdh}}</td>
                            </tr>
                        </table>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs v-if="qyfxInfo">
                    <el-tab-pane label="企业分析" >
                        <table class="detailtable">
                            <tr>
                                <td width="25%" style="text-align: center">分析指标</td>
                                <td width="25%" style="text-align: center">指标评级</td>
                                <td width="25%" style="text-align: center">分析指标</td>
                                <td width="25%" style="text-align: center">指标评级</td>
                            </tr>
                            <tr>
                                <td width="25%" style="text-align: center">社保缴纳信息</td>
                                <td width="25%" style="text-align: center">
                                    <el-popover
                                            placement="top"
                                            trigger="hover"
                                            v-model="visible1">
                                        <div style="text-align: right; margin: 0">
                                            <el-table :data="scoreSb" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                            </el-table>
                                        </div>
                                        <span slot="reference" class="tips" v-if="qyfxInfo.sb">{{qyfxInfo.sb}}</span>
                                        <span slot="reference" class="tips" v-else>暂无评级</span>
                                    </el-popover></td>
                                <td width="25%" style="text-align: center">企业欠税</td>
                                <td width="25%" style="text-align: center">
                                    <el-popover
                                            placement="top"
                                            trigger="hover"
                                            v-model="visible2">
                                        <div style="text-align: right; margin: 0">
                                            <el-table :data="scoreQs" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                            </el-table>
                                        </div>
                                        <span slot="reference" class="tips" v-if="qyfxInfo.qs">{{qyfxInfo.qs}}</span>
                                        <span slot="reference" class="tips" v-else>A</span>
                                    </el-popover>
                                </td>
                            </tr>
                            <tr>
                                <td width="25%" style="text-align: center">行政处罚</td>
                                <td width="25%" style="text-align: center">
                                    <el-popover
                                            placement="bottom"
                                            trigger="hover"
                                            v-model="visible3">
                                        <div style="text-align: right; margin: 0">
                                            <el-table :data="scoreCf" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                            </el-table>
                                        </div>
                                        <span slot="reference" class="tips" v-if="qyfxInfo.cf">{{qyfxInfo.cf}}</span>
                                        <span slot="reference" class="tips" v-else>A</span>
                                    </el-popover>
                                </td>
                                <td width="25%" style="text-align: center">环保评级</td>
                                <td width="25%" style="text-align: center">
                                    <el-popover
                                            placement="bottom"
                                            trigger="hover"
                                            v-model="visible4">
                                        <div style="text-align: right; margin: 0">
                                            <el-table :data="scoreHb" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                            </el-table>
                                        </div>
                                        <span slot="reference" class="tips" v-if="qyfxInfo.hb">{{qyfxInfo.hb}}</span>
                                        <span slot="reference" class="tips" v-else>暂无评级</span>
                                    </el-popover></td>
                            </tr>
                        </table>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs v-if="rzxxInfo">
                    <el-tab-pane label="融资信息">
                        <table class="detailtable" style="text-align: center">
                            <tr>
                                <td width="20%">申请产品</td>
                                <td>{{rzxxInfo.productName}}</td>
                                <td width="25%">申请时间</td>
                                <td>{{rzxxInfo.applyTime}}</td>
                            </tr>
                            <tr>
                                <td width="20%">需求金额（万元）</td>
                                <td>{{rzxxInfo.xqje}}</td>
                                <td width="25%">授信预估额度（万元）</td>
                                <td>{{rzxxInfo.sxed}}</td>
                            </tr>
                            <tr>
                                <td width="20%">融资用途</td>
                                <td>{{rzxxInfo.rzyt}}</td>
                                <td width="25%">融资状态</td>
                                <td>{{rzxxInfo.rzzt}}</td>
                            </tr>
                            <tr v-if="rzxxInfo.fkje">
                                <td width="20%">放款金额（万元）</td>
                                <td>{{rzxxInfo.fkje}}</td>
                                <td width="25%">放款时间</td>
                                <td>{{rzxxInfo.fkrq}}</td>
                            </tr>
                            <tr>
                                <td width="20%">备注</td>
                                <td colspan="3">{{rzxxInfo.remark}}</td>
                            </tr>
                        </table>
<!--                        <el-table :data="rzxxInfo" border :header-cell-style="{background:'#f2f9fe'}">-->
<!--                            <el-table-column prop="productName" label="申请产品" align="center"></el-table-column>-->
<!--                            <el-table-column prop="sxed" label="授信预估额度（万元）" align="center"></el-table-column>-->
<!--                            <el-table-column prop="xqje" label="需求金额（万元）" align="center"></el-table-column>-->
<!--                            <el-table-column prop="applyTime" label="申请时间" align="center"></el-table-column>-->
<!--                            <el-table-column prop="rzzt" label="融资状态" align="center"></el-table-column>-->
<!--                            <el-table-column prop="remark" label="备注" align="center"></el-table-column>-->
<!--                        </el-table>-->
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        wxrzQuery,
        getDetail,
        qyfx,
    } from '@/api/gradManage.js'
    export default {
        data() {
            return {
                loading: false,
                /* 分页 */
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    background:false
                },
                visible1:false,
                visible2:false,
                visible3:false,
                visible4:false,
                dataList:{},
                rzxxInfo:{},
                qyfxInfo:{},
                box: false,
                /* 额度预估 */
                edTab: [
                    {
                        in: 1,
                        jg: "建设银行",
                        mc: "装修贷",
                        yg: 30,
                        fs: "信用",
                        sj: "2012.1.1 19:12:23",
                    },
                    {
                        in: 2,
                        jg: "江苏银行",
                        mc: "信易贷",
                        yg: 30,
                        fs: "信用",
                        sj: "2012.1.1 19:12:23",
                    },
                ],
                /* 贷款额度 */
                dkTab: [
                    {
                        in: 1,
                        jg: "北京银行",
                        fs: "信用",
                        ll: "8.4%",
                        frq: "2021.01.01",
                        drq: "2035.01.01",
                        dkff: "20",
                        je: "8",
                        qx: 20000,
                        yqje: "无",
                    },
                    {
                        in: 2,
                        jg: "北京银行",
                        fs: "信用",
                        ll: "8.4%",
                        frq: "2021.01.01",
                        drq: "2035.01.01",
                        dkff: "10",
                        je: "8",
                        qx: 20000,
                        yqje: "2021.1 2000元",
                    },
                    {
                        in: 3,
                        jg: "北京银行",
                        fs: "信用",
                        ll: "8.4%",
                        frq: "2021.01.01",
                        drq: "2035.01.01",
                        dkff: "24",
                        je: "0",
                        qx: 0,
                        yqje: "无",
                    },
                ],
                data: [
                    /* {
                      qymc: "宇科信息技术有限公司",
                      xydm: "1151162400889155",
                      qylx: "2",
                      fr: "张利仁",
                      ffje: "90",
                      dkje: "10",
                      pf: "98",
                      ed: "20",
                    },
                    {
                      qymc: "早点包子铺",
                      xydm: "1151162400889155",
                      qylx: "5",
                      fr: "张爱梅",
                      ffje: "90",
                      dkje: "10",
                      pf: "91",
                      ed: "30",
                    }, */
                ],
                searchList:{},
                scoreSb:[
                    {des:'近1年企业实缴金额不低于上年实缴金额',level:'A'},
                    {des:'近1年企业实缴金额低于上年20%及以内',level:'B'},
                    {des:'近1年企业实缴金额低于上年50%及以内',level:'C'},
                    {des:'近1年企业实缴金额低于上年50%以上',level:'D'},
                ],
                scoreQs:[
                    {des:'无欠税记录',level:'A'},
                    {des:'1条欠税记录',level:'B'},
                    {des:'2条及以上欠税记录',level:'C'},
                ],
                scoreCf:[
                    {des:'无行政处罚记录',level:'A'},
                    {des:'1条行政处罚记录',level:'B'},
                    {des:'2条及以上行政处罚记录',level:'C'},
                ],
                scoreHb:[
                    {des:'环保评价为绿色',level:'A'},
                    {des:'环保评价为蓝色',level:'B'},
                    {des:'环保评价为黄色',level:'C'},
                    {des:'环保评价为红色',level:'D'},
                    {des:'环保评价为黑色',level:'E'},
                ],
                option: {
                    headerAlign: "center",
                    align: "center",
                    border: true,
                    card: true,
                    defaultExpandAll: true,
                    dialogDrag: false,
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    searchLabelWidth: '25%',
                    searchSpan: 6,
                    searchMenuSpan: 4,
                    menu:false,
                    //menuWidth:'100px',
                    column: [
                        {
                            label: "统一社会信用代码",
                            prop: "shtyxydm",
                            search: true,
                            width:'200px',
                            searchLabelWidth: '35%',
                        },
                        {
                            label: "企业名称",
                            prop: "qymc",
                            search: true,
                            //width:'260px',
                            width:'275px',
                        },
                        
                        {
                            label: "所属银行",
                            prop: "productName",
                            //width:'200px'
                            width:'300px'
                        },
                        // {
                        //     label: "授信预估额度（万元）",
                        //     prop: "sxed",
                        //     width:'150px'
                        // },
                        // {
                        //     label: "需求金额（万元）",
                        //     prop: "xqje",
                        // },
                        {
                            label: "放款金额（万元）",
                            prop: "fkje",
                            width:'185px',
                        },
                        {
                            label: "放款时间",
                            prop: "fkrq",
                        },
                        {
                            label: "融资状态",
                            prop: "rzzt",
                            search: true,
                            type: 'select',
                            dicData: [],
                        }
                    ],
                },
            };
        },
        created(){
            this.getDict();
        },
        methods: {
            onLoad(page, params = {}) {
                let searchList = this.searchList
                Object.assign(params, {
                    ...searchList,
                    pageNum: this.page.currentPage,
                    pageSize: this.page.pageSize
                });
                /* if (page.layout) {
                  Object.assign(params, {
                    pageNum: this.page.currentPage,
                    pageSize: this.page.pageSize,
                  });
                } else {
                  Object.assign(params, page);
                } */
                this.loading = true;
                wxrzQuery(params).then(data => {
                    if (data.status) {
                        this.loading = false;
                        this.data = data.data.records;
                        this.page.total = data.data.total;
                    }
                });
            },
            async getDict() {
                const dataRZZT = await this.$store.dispatch('asyncApi/getDict', {
                    code: 'RZZT'
                });
                //this.option.column[6].dicData = dataRZZT;
                this.option.column[5].dicData = dataRZZT;
            },
            /* 搜索筛选 */
            searchChange(params, done) {
                done();
                this.page.currentPage = 1;
                this.page.pageSize = 10;
                this.searchList = {...params}
                this.onLoad();
            },/* 清空 */
            resetChange() {
                this.page.currentPage = 1;
                this.page.pageSize = 10;
                this.searchList = {}
                this.onLoad();
            },
            /* 改变页码 */
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            /* 查看 */
            viewPage(row,index) {
                this.dataList = {}
                this.rzxxInfo = {
                    productName:row.productName,
                    fddbr:row.fddbr,
                    fddbrdh:row.fddbrdh,
                    qylxr:row.qylxr,
                    qylxrdh:row.qylxrdh,
                    sxed:row.sxed,
                    xqje:row.xqje,
                    applyTime:row.applyTime,
                    rzyt:row.rzyt,
                    rzzt:row.rzzt,
                    fkje:row.fkje,
                    fkrq:row.fkrq,
                    remark:row.remark,
                }
                this.qyfxInfo = {}
                getDetail({shtyxydm:row.shtyxydm}).then(data => {
                    if (data.status) {
                        this.box = true;
                        let {companyBaseInfo,companyCorporateInformation} = data.data;
                        this.dataList = {
                            companyBaseInfo:companyBaseInfo ? companyBaseInfo : {},
                            companyCorporateInformation:companyCorporateInformation ? companyCorporateInformation : {}
                        }
                    }else{
                        this.$message.error(data.msg);
                    }
                });
                qyfx({shtyxydm:row.shtyxydm}).then(data1 => {
                    if (data1.status) {
                        this.box = true;
                        this.qyfxInfo = data1.data ? data1.data : {}
                    }else{
                        this.$message.error(data1.msg);
                    }
                });
            },
        },
    };
</script>

<style scoped="scoped" lang="scss">
    $bb: 1px solid #eaeaea;
    /deep/ .avue-crud__pagination{
        text-align: center;
    }
    .avue_detail {
        .h_label {
            color: #3a3f63;
            font-weight: 600;
            padding: 10px 0;
        }

        .bb {
            border-bottom: $bb;
        }

        .lh {
            line-height: 35px;
            margin-top: 15px;

            .el-col-14 {
                font-size: 0.8rem;
            }
        }

        .c {
            color: #409eff;
        }
    }
    .tips{
        color: #4a8bf6;
        font-size: 14px;
    }
    .detailtable{width: 100%; border-collapse: collapse; border-spacing: 0; border:#e5e5e5 solid 1px;}
    .detailtable tr{width: 100%;}
    .detailtable td{ padding: 8px 10px; text-align: left; line-height: 24px; font-size: 14px; color:#434343;  border:#e5e5e5 solid 1px;}
    .detailtable td{font-weight: normal; background-color:#fff}
    .detailtable td{word-break:break-all;}
</style>
